'use strict';
import IThreeApp from './IThreeApp';

class BaseThreeApp implements IThreeApp {
  protected element: HTMLCanvasElement = null;
  protected isRunning: boolean = false;

  public getElement() {
    return this.element;
  }

  public get clientWidth() {
    return this.element ? this.element.clientWidth : 0;
  }

  public get clientHeight() {
    return this.element ? this.element.clientHeight : 0;
  }

  public create() {
    this.destory();
    const can = document.createElement('canvas');
    this.element = can;

    window.onresize = (e: UIEvent) => {
      this.onresize(e);
    };
    window.onkeydown = (e:KeyboardEvent) => {
      this.onkeydown(e);
    };   
    window.onmousewheel = (e) => {
      this.onmousewheel(e as WheelEvent);
    };
    this.element.onmousemove = (e) => {
      this.onmousemove(e as MouseEvent);
    };
    this.element.onmousedown = (e) => {
      this.onmousedown(e as MouseEvent);
    };
    this.element.onmouseup = (e) => {
      this.onmouseup(e as MouseEvent);
    };
    this.element.oncontextmenu = (e)  =>  {
      this.oncontextmenu(e);
    };

    return can;
  }

  public onresize(e: UIEvent): any | void {}

  public onkeydown(e: KeyboardEvent): any | void {}

  public onmousewheel(e: WheelEvent): any | void {}

  public onmousemove(e: MouseEvent): any | void {}

  public onmousedown(e: MouseEvent): any | void {}

  public onmouseup(e: MouseEvent): any | void {}

  public oncontextmenu(e: MouseEvent): any | void {}

  public start() {}

  public destory() {
    this.isRunning = false;
    if (this.element !== null) {
      const content = document.getElementById('content');
      if (content && content.children[0] == this.element) {
        content.removeChild(this.element);
      }
      window.onresize
      this.element.onmousemove = null;
      this.element.onmousedown = null;
      this.element.onmouseup = null;
      this.element.oncontextmenu = null;
      this.element = null;
    }
  }
}

export default BaseThreeApp;
